<template>
  <music-list :name="name" :bg-img="bg" :songs="songs" :rank="true"></music-list>
</template>

<script>
    import MusicList from "@/components/music-list/MusicList";
    import {getRankSong} from "@/common/js/song";

    export default {
        name: "RankDetail",
        components: {MusicList},
        mounted(){
            this.getSong()
        },
        data(){
            return {
                songs: []
            }
        },
        computed:{
            name(){
                return this.$route.params.topTitle
            },
            bg(){
                if(!this.songs.length) return ''
                else                   return this.songs[0].img
            }
        },
        methods:{
            async getSong(){
               this.songs = await getRankSong(this.$route.params.id)
            }
        }
    }
</script>

<style scoped>

</style>
